$(function(){
    //1.监听游戏规则的点击
    $('.rules').click(function(){
        $('.rule').stop().fadeIn(100);
    })
    //2.监听关闭按钮的点击
    $('.close').click(function(){
        $('.rule').stop().fadeOut(100);
    })
    //3.监听开始按钮的单击
    $('.start').click(function(){
        $(this).stop().fadeOut(100);
        //调用处理进度条的方法
        progressHandler();
        //调用处理灰太狼动画的方法
        StartWolfAnimation();
    //4.监听重新开始的点击
    $('.restart').click(function(){
        $('.mask').stop().fadeOut(100);
        //调用处理进度条的方法
        progressHandler();
        //调用处理灰太狼动画的方法
        StartWolfAnimation();
    })

    //定义一个专门处理进度条的方法
    function progressHandler(){
        //游戏重新开始按钮触发时，重新设置一下进度条。
        var progressWidth = $('.progress').css({
            width:180
        })
        //开启定时器处理进度条
        var timer = setInterval(function(){
            //拿到进度条当前的宽度
            var progressWidth = $('.progress').width();
            //减少当前的宽度
            progressWidth-=1;
            //重新给进度条赋值
            $('.progress').css({
                width:progressWidth
            })
            // 判断进度条是否为零
            if (progressWidth<=0){
                // 关闭定时器
                clearInterval(timer);
                // 显示重新开始界面
                $('.mask').stop().fadeIn(100);
                //停止灰太狼和小灰灰的动画
                StopWolfAnimation();
            }

        },200)
        //
    }
    //定义一个专门处理灰太狼动画的方法
    var wolfTimer;
    function StartWolfAnimation(){
        //1.定义两个数组保存所有灰太狼和小灰灰的图片路径
        var wolf_1=['./imgs/h0.png','./imgs/h1.png','./imgs/h2.png',
        './imgs/h3.png','./imgs/h4.png','./imgs/h5.png','./imgs/h6.png',
        './imgs/h7.png','./imgs/h8.png','./imgs/h9.png']
        var wolf_2=['./imgs/x0.png','./imgs/x1.png','./imgs/x2.png',
        './imgs/x3.png','./imgs/x4.png','./imgs/x5.png','./imgs/x6.png',
        './imgs/x7.png','./imgs/x8.png','./imgs/x9.png']
        //2.定义一个数组保存所有可能出现的位置
        var arrPos = [
            {
                left:"100px",top:"115px"
            },
            {
                left:"20px",top:"115px"
            },
            {
                left:"190px",top:"142px"
            },
            {
                left:"105px",top:"193px"
            },
            {
                left:"19px",top:"221px"
            },
            {
                left:"202px",top:"212px"
            },
            {
                left:"120px",top:"275px"
            },
            {
                left:"30px",top:"295px"
            },
            {
                left:"209px",top:"297px"
            }
        ]
        //..随机选取灰太狼或小灰灰
        var WolfType = Math.round(Math.random()) == 0?wolf_1:wolf_2
        //..随机获取图片位置
        var posIndex = Math.round(Math.random()*8);
        //3.创建一个图片
        var $wolfImage = $('<img src=" " class="wolfImage"> ');
        //4.设置图片显示的位置
        $wolfImage.css({
            position:"absolute",
            left:arrPos[posIndex].left,
            top:arrPos[posIndex].top
        })
        //5.设置图片的内容
        //为显示动画而定义的下标
        window.wolfIndex = 0;
        window.wolfIndexEnd = 5;
        wolfTimer = setInterval(function(){
            //动画需要5个图片来完成
            if(wolfIndex>wolfIndexEnd){
                // 将上个完成动画的狼移除
                $wolfImage.remove();
                //重置定时器
                clearInterval(wolfTimer);
                //重新开始动画
                StartWolfAnimation();
            }    
            $wolfImage.attr('src',WolfType[wolfIndex]);
            wolfIndex++;
        },300)
        //6.将图片添加到界面上
        $('.container').append($wolfImage)
        //7.调用处理游戏有关分值的方法
        gameRules($wolfImage); 
    }
    //定义一个停止灰太狼动画的方法
    function StopWolfAnimation(){
        //移除狼
        $('.wolfImage').remove()
        //关闭定时器
        clearInterval(wolfTimer);
    }
    //定义一个关于分值的方法
    function gameRules($wolfImage){
        $wolfImage.one('click',function(){
            window.wolfIndex = 5;
            window.wolfIndexEnd = 9;
            //拿到当前点击图片的地址，用于区分灰太狼和小灰灰
            var $src = $(this).attr('src');
            //判断当前点击的图片是否为灰太狼
            var flag = $src.indexOf('h') >=0;
            //根据点击的图片类型增减分值
            if (flag){
                //图片为灰太狼，所以+10
                $('.score').text(parseInt($('.score').text())+10)
            }else{
                // 图片为小灰灰，所以-10
                $('.score').text(parseInt($('.score').text())-10)
        }
        })
        
    }
})


})